<template>
  <div class="wrap">
    <public-head :title="title" :path="path" />
    <div class="allmessage" v-for="(item, index) in messageData" :key="index">
      <div>
        <img :src="item.imgurl" alt="" />
      </div>

      <div class="m_info">
        <div class="info_one">
          <span>{{ item.name }}</span>
          <span>{{ item.date }}</span>
        </div>
        <div class="info_two">
          <span>{{ item.content }}</span>
          <span v-if="item.num != ''">{{ item.num }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PublicHead from "../../../components/PublicHead";
import img1 from "../../../../public/images/message/message2.png";
import img2 from "../../../../public/images/message/peixun_message.png";
import img3 from "../../../../public/images/message/zhushou_message.png";
import img4 from "../../../../public/images/message/kaoshi_message.png";
import img5 from "../../../../public/images/message/touxiang.png";

export default {
  name: "message",
  components: {
    PublicHead,
  },
  data() {
    return {
      title: "我的消息",
      path: "message",
      messageData: [
        {
          imgurl: img1,
          name: "系统消息",
          date: "5月10日",
          content: "第一时间接受消息",
          num: "2",
        },
        {
          imgurl: img2,
          name: "培训通知",
          date: "5月10日",
          content: "第一时间接受消息",
          num: "",
        },
        {
          imgurl: img3,
          name: "工作助手",
          date: "5月10日",
          content: "第一时间接受消息",
          num: "",
        },
        {
          imgurl: img4,
          name: "考试消息",
          date: "5月10日",
          content: "第一时间接受消息",
          num: "",
        },
        {
          imgurl: img5,
          name: "石美丽",
          date: "5月10日",
          content: "我的审批麻烦通过一下，谢谢~",
          num: "",
        },
      ],
    };
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.wrap{
    background-color #fff
    .allmessage{
        width 345px
        border-bottom 1px solid #ddd
        margin-left 15px
        display flex
        img{
            width 38px
            height 38px
            margin 16px 15px 16px 0
        }
        .m_info{
            margin-top 15px
            width 290px
            line-height 23px
            .info_one{
                display flex
                justify-content space-between
                span:nth-child(1){
                    font-size 14.5px
                    color #333
                    font-weight 600
                }
                span:nth-child(2){
                    font-size 11px
                    color #999
                }
            }
            .info_two{
                display flex
                justify-content space-between
                span:nth-child(1){
                    font-size 13.5px
                    color #666
                }
                span:nth-child(2){
                    font-size 11px
                    color #fff
                    background-color #FE2828
                    border-radius 50%
                    width 20px
                    height 20px
                    text-align center
                    line-height 20px
                }
            }
        }
    }

}
</style>
